<template>
  <div class="com-container" style="fontsize: 12px">
    <!-- :style="popheight+'px'" :style="RiskWidth" -->
    <div
      class="com-chart com-charts"
      ref="echarts"
      style="z-index: 555; position: relative"
    ></div>
  </div>
</template>

<script>
export default {
  //   props: ["commonData","index"],
  props: {
    commonData: {
      type: Array,
      default: () => {},
    },
    index: {
      type: Number,
      //   default: () => {},
    },
  },
  data() {
    return {
      chartInstance: null,
      allData: null, // 服务器返回的数据
      xDatas: null,
    };
  },
  watch: {
    commonData: {
      handler(newVal) {
        if (newVal) {
          this.allData = newVal;
          this.getData(newVal);
          window.addEventListener("resize", this.screenAdapter);
      // 在页面加载完成的时候, 主动进行屏幕的适配
      this.screenAdapter();
        }
      },
      immediate: true,
    },
  },

  mounted() {
    setTimeout(() => {
      this.initChart();

      window.addEventListener("resize", this.screenAdapter);
      // 在页面加载完成的时候, 主动进行屏幕的适配
      this.screenAdapter();
    }, 500);
  },

  destroyed() {
    // 在组件销毁的时候, 需要将监听器取消掉
    window.removeEventListener("resize", this.screenAdapter);
  },
  methods: {
    initChart() {
      this.chartInstance = this.$echarts.init(this.$refs.echarts);

      //   var rainfallValue = [
      //     20, 120, 200, 130, 120, 170, 190, 241, 122, 112, 101, 21,
      //   ];
      var option = {
        grid: {
          left: "8%",
          right: "8%",
          bottom: "10%",
          top: "25%",
          containLabel: true,
        },
        tooltip: {
          show: true,
          trigger: "item",
        },
        // dataZoom: [
        //   {
        //     show: true,
        //     height: 10,
        //     xAxisIndex: [0],
        //     bottom: 10,
        //     start: 10,
        //     end: 80,
        //   },
        //   {
        //     type: "inside",
        //     show: true,
        //     height: 15,
        //     start: 1,
        //     end: 35,
        //   },
        // ],
        title: {
          text: "深度、电流曲线",
          left: "center",
          // top:'14%',
          textStyle: {
            color: "rgba(0,0,0,0.65)",
            fontSize: 16,
          },
        },
        xAxis: {
          type: "category",
          // name: "时间",
          // data: ['水', '水泥1', '水泥2', '骨料1', '骨料2', '骨料3', '骨料4', '骨料5', '粉煤灰', '矿粉', '外加剂1', '外加剂2'],//数据
          // data:this.xDatas,
          axisLabel: {
            color: "",
            // rotate: 45, // 设置标签倾斜角度，单位为度
          },

          axisLine: {
            show: true,
            lineStyle: {
              color: "#9D9EA0",
            },
          },
          splitLine: {
            //坐标轴在 grid 区域中的分隔线。
            show: true,
            lineStyle: {
              color: "#DEDEDE",
              // 	opacity:0.1
            },
          },
          axisTick: false,
        },
        yAxis: [
          {
            // min: 0,//最小
            // max: 1200,//最大
            // interval: 200,//相差
            name: "深度",
            type: "value",

            axisLine: {
              show: true,
              lineStyle: {
                color: "#9D9EA0",
              },
            },
            axisLabel: {
              textStyle: {
                color: "#9D9EA0",
              },
            },
            splitLine: {
              //分隔辅助线
            },
          },
          {
            // min: 0,//最小
            // max: 1200,//最大
            // interval: 200,//相差
            name: "电流",
            type: "value",
            position: "right",
            axisLine: {
              show: true,
              lineStyle: {
                color: "#9D9EA0",
              },
            },
            axisLabel: {
              textStyle: {
                color: "#9D9EA0",
              },
            },
            splitLine: {
              //分隔辅助线
            },
          },
        ],

        series: [
          {
            name: "深度",
            type: "line",
            // data: rainfallValue,
            itemStyle: {
              normal: {
                color: "#029cec",
                // label: {
                //     show: true,
                //     color: '#029cec',
                // }
              },
            },
            // markPoint: {
            //   data: [
            //     {
            //       type: "max",
            //       name: "最大值",
            //       itemStyle: {
            //         label: {
            //           show: false,
            //         },
            //       },
            //     },
            //   ],
            // },
          },
          {
            name: "电流",
            type: "line",
            zlevel: 11,
            yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
            // data: rainfallValue,
            itemStyle: {
              normal: {
                color: "#ffa43a",
                // label: {
                //     show: true,
                //     color: '#029cec',
                // }
              },
            },
            // markPoint: {
            //   data: [
            //     {
            //       type: "max",
            //       name: "最大值",
            //       itemStyle: {
            //         label: {
            //           show: false,
            //         },
            //       },
            //     },
            //   ],
            // },
          },
        ],
      };
      this.chartInstance.setOption(option);
    },
    getData(data) {
      var that = this;

      setTimeout(() => {
        that.updateChart(data);
        // that.updateChart();
      }, 800);
    },
    updateChart() {
      var data = this.allData;
      var xitems = [];
      var yitems = [];
      var liu = [];

      data.map((item) => {
        xitems.push(item.finishDates);
        yitems.push(item.sdqsd);
        liu.push(item.szgdl);
      });

      var dataOption = {
        xAxis: {
          data: xitems,
        },
        series: [
          {
            data: yitems,
          },
          {
            data: liu,
          },
        ],
      };

      this.chartInstance.setOption(dataOption);
    },
    screenAdapter() {
      const titleFontSize = this.$refs.echarts.offsetWidth / 100;

      //   和分辨率大小相关的配置项
      const adapterOption = {
        title: {
          textStyle: {
            fontSize: titleFontSize * 2,
            // fontWeight: 500
          },
        },
      };
      this.chartInstance.setOption(adapterOption);
      // 手动的调用图表对象的resize 才能产生效果
      this.chartInstance.resize();
    },
  },
};
</script>

<style lang="less" scope>
.com-chart::after {
  //     display: block;
  //     content: "123";
  //     position: absolute;
  //     left: 0;
  //     top: 0;
  //   width: 50px;
  //   height: 40px;
  //   border: 1px solid red;
  //   z-index: 9999;
}

.com-charts ::after {
  //   display: block;
  //   content: "123";
  //   position: absolute;
  //   transform: translate(-50%,-50%);
  //   left: 50%;
  //   top: 60%;
  // width: 47%;
  // height: 90%;

  // z-index: 9999;
}

/* echarts表格样式 */
.echartsTable {
  width: 100%;
  text-align: center;
  min-height: 25px;
  line-height: 25px;
  border-collapse: collapse;
  padding: 2px;
  font-size: 12px;
}

.echartsTable,
.echartsTable tr th,
.echartsTable tr td {
  // border: 1px solid gray;
  // flex: 1;
  border-bottom: 1px solid #dddddd;
  text-align: left;
  padding: 2px 5px;
}

.echartsTable .typeshi {
  width: 50%;
}

.echartsTable tr:nth-child(even) {
  border-bottom: 1px solid gray;
  background: #f9f9f9;
}
.com-charts div {
  width: 100% !important;
  height: 100% !important;
}
// .com-charts div canvas{
//   width: 1000px !important;
//   // height: 100% !important;
// }
// .com-charts >div> {
//   width: 100% !important;
//   height: 100%;
// }
</style>
